<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="100px"
				class="flex-warp-container"
			>
				<el-form-item :label="`${$t('common.choose_merchant')}:`">
					<merchant-select
						v-model="queryData.merchantId"
						:merchantInfo.sync="merchantObj"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.updateAt')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-date-picker
						v-model="searchTime"
						size="medium"
						:picker-options="pickerOptions"
						type="datetimerange"
						format="yyyy-MM-dd HH:mm:ss"
						range-separator="-"
						align="right"
						:start-placeholder="$t('common.start_time')"
						:end-placeholder="$t('common.end_time')"
						:clearable="false"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.member_number')}:`"
					prop="operationTarget"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model.trim="queryData.operationTarget"
						v-symbols
						clearable
						:placeholder="`${$t('member.username_placeholder')}`"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.number_type')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.operatorType"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
						collapse-tags
					>
						<el-option
							v-for="item in accountTypeArr"
							:key="item.code"
							:label="item.description"
							:value="item.description"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('member.vip_change_type')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.operationFunc"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
						collapse-tags
					>
						<el-option
							v-for="(item, index) in changeTypeArr"
							:key="index"
							:label="item"
							:value="item"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.updateBy')}:`"
					class="flex-row-container"
					label-width="61px"
				>
					<el-input
						v-model="queryData.operator"
						v-symbols
						clearable
						size="medium"
						:placeholder="`${$t('common.please_enter')}`"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<ReportDetailTable
				:tableDataColumn="tableDataColumn"
				:tableDataList="tableData"
				:tableHeight="tableHeight"
			/>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
	</main-content>
</template>

<script>
import dayjs from 'dayjs'
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
import { getColumns } from './components/columns'
const start1 = () => {
  return dayjs()
    .startOf('day')
    .valueOf()
}
const end1 = () => {
  return dayjs()
    .endOf('day')
    .valueOf()
}
export default {
  name: routerNames.memberInfoChangeRecord,
  components: {
    MainContent,
    ReportDetailTable: () => import('@/components/ReportDetailTable')
  },
  mixins: [list],
  data() {
    return {
      tableHeight: 480,
      otherDependenComponents: [],
      queryData: {},
      tableData: [],
      tableDataColumn: [],
      searchTime: [start1(), end1()],
      merchantObj: '',
      changeTypeArr: [],
      total: 0
    }
  },
  computed: {
    accountTypeArr() {
      return this.globalDics.accountType || []
    }
  },
  created() {
    this.getChangeType()
  },
  mounted() {
    this.tableDataColumn = getColumns()
    if (!this.$store.getters.isZk) {
      this.queryData.merchantId = this.$store.getters.merchantInfo.id
      this.loadData()
    }
  },
  methods: {
    getChangeType() {
      this.loading = true
      this.changeTypeArr = []
      this.$api.getActionLogTypeList().then((res) => {
        this.loading = false
        if (res?.code === 200) {
          this.changeTypeArr = res?.data?.memberFuncs.filter((item) => item !== undefined || item !== null)
        } else {
          this.$message({
            message: res?.msg || this.$t('common.interface_error'),
            type: 'error'
          })
        }
      }).catch(() => {
        this.loading = false
      })
    },
    loadData() {
      this.loading = true
      const [startTime, endTime] = this.searchTime || []
	  Object.keys(this.queryData).forEach((k) => {
			if (this.queryData[k] === '') {
				this.queryData[k] = undefined
			}
		})
      const params = {
        ...this.queryData,
        ...this.getParams(params),
        createdAtStart: dayjs(startTime).format('YYYY-MM-DD HH:mm:ss'),
        createdAtEnd: dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
      }
      this.tableData = []
      const _self = this
      this.$api
        .getMemberInfoChangeList(params)
        .then((res) => {
          _self.loading = false
          if (res?.code === 200) {
            const { record, totalRecord } = res.data || {}
            const list = record.map(item => {
              if (item.operationFunc == '姓名') {
                item.beforeModify = this.parseRellyName(item.beforeModify)
                item.afterModify = this.parseRellyName(item.afterModify)
              }
              if (item.operationFunc == '手机号码') {
                item.beforeModify = this.parseStringMiddlePhoneToStar(item.beforeModify)
                item.afterModify = this.parseStringMiddlePhoneToStar(item.afterModify)
              }
              return item
            })
            _self.tableData = Array.isArray(list)
              ? Object.freeze(list)
              : []
            _self.total = totalRecord || 0
            _self.loading = false
          }
        })
        .catch(() => {
          _self.loading = false
        })
    },
    reset() {
      this.searchTime = [start1(), end1()]
      this.queryData = {}
      this.merchantObj = ''
      this.loadData()
    }
  }
}
</script>

<style lang="scss" scoped></style>
